<template>
  <ContentWrap>
    <div class="content">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">基础信息</div>
      </div>
      <div class="content_main">
        <el-form 
          ref="formRef" 
          :inline="true" 
          :model="formData.data" 
          :rules="formRules" 
          class="-mb-15px"
          label-width="auto"
        >
          <el-row :gutter="16">
            <el-col :span="6">
              <el-form-item label="车牌号" prop="carNo">
                <el-input v-model="formData.data.carNo" placeholder="请输入车牌号" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="厂牌型号" prop="labelTypeName">
                  <el-input v-model="formData.data.labelTypeName" placeholder="请输入厂牌型号" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车辆品牌" prop="carBrand">
                  <el-input v-model="formData.data.carBrand" placeholder="请输入车辆品牌" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="核定乘员人数" prop="maxOccupants">
                  <el-input v-model="formData.data.maxOccupants" placeholder="请输入核定乘员人数" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否是新能源" prop="isNewEnergy">
                  <el-select v-model="formData.data.isNewEnergy" placeholder="请选择是否是新能源">
                    <el-option label="是" :value="1" />
                    <el-option label="否" :value="0" />
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车型" prop="cardType">
                <el-select v-model="formData.data.cardType" filterable clearable placeholder="请选择车型">
                  <el-option v-for="item in carTypeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="运行状态" prop="runId">
                <el-select v-model="formData.data.runId" filterable clearable placeholder="请选择运行状态">
                  <el-option v-for="item in runList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="运营状态" prop="operateId">
                <el-select v-model="formData.data.operateId" filterable clearable placeholder="请选择运营状态">
                  <el-option v-for="item in operateList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属部门" prop="departmentId">
                <el-tree-select
                  class="formInp"
                  v-model="formData.data.departmentId"
                  :data="deptTree"
                  filterable
                  clearable
                  :props="defaultProps"
                  check-strictly
                  default-expand-all
                  placeholder="请选择责任部门"
                  value-key="deptId"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="车辆图片" prop="carPhotos">
                <UploadImgs
                  v-model="formData.data.carPhotos"
                  :limit="4"
                  :fileSize="20"
                  :fileType="['image/jpeg', 'image/png']"
                  height="130px"
                  width="200px"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </ContentWrap>
  <ContentWrap>
    <div class="content">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">操作记录</div>
      </div>
      <div class="content_main">
        <el-table :data="formData.data.operatelogos">
          <el-table-column align="center" label="类型" prop="typeId">
            <template #default="scope">
              <el-select 
                class="formInp"
                v-if="scope.row.editable" 
                v-model="scope.row.typeId"
                placeholder="请选择类型"
              >
                <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <div v-else>{{ scope.row.typeId === 1 ? '故障' : (scope.row.typeId === 2 ? '维护' : '交易') }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="时间" prop="operateTime">
            <template #default="scope">
              <el-date-picker
                v-if="scope.row.editable"
                v-model="scope.row.operateTime"
                style="width: 100%;"
                type="date"
                placeholder="请选择事故时间"
                @change="e => scope.row.operateTime = formatDateToYMD(e)"
              />
              <div v-else>{{ scope.row.operateTime }}</div>
            </template>
          </el-table-column>                  
          <el-table-column align="center" label="操作人" prop="operateName">
            <template #default="scope">
              <el-input 
                class="formInp"
                v-if="scope.row.editable" 
                v-model="scope.row.operateName" 
                clearable 
                placeholder="请输入操作人"
              />
              <div v-else>{{ scope.row.operateName }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="联系电话" prop="phone">
            <template #default="scope">
              <el-input
                class="formInp"
                v-if="scope.row.editable" 
                v-model="scope.row.phone" 
                clearable
                :maxlength="11"
                placeholder="请输入联系电话"
              />
              <div v-else>{{ scope.row.phone }}</div>
            </template>
          </el-table-column>
          <el-table-column :width="200" align="center" label="操作">
            <template #default="scope">
              <div v-if="scope.row.editable">
                <el-button link type="info" @click="cancle(scope.$index)">取消</el-button>
                <el-button link type="primary" @click="save(scope.row, scope.$index)">保存</el-button>
              </div>
              <div v-else>
                <el-button link type="primary" @click="edit(scope.$index)">
                  编辑
                </el-button>
                <el-popconfirm
                  class="box-item"
                  title="确定删除？"
                  placement="top-end"
                  @confirm="del(scope.$index)"
                >
                  <template #reference>
                    <el-button link type="danger">
                      删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-button @click="addRow" plain class="addRow">
          <el-icon class="mr-6"><Plus /></el-icon>  添加
        </el-button>
      </div>
    </div>
  </ContentWrap>
  <ContentWrap class="flex-c">
    <el-button class="!w-80px" type="primary" :loading="loading" @click="submitForm">提交</el-button>
    <el-button class="!w-80px" type="warning" @click="closeForm">取消</el-button>
  </ContentWrap>

</template>
<script setup>
  import {ref,reactive} from "vue"
  import { UploadImgs } from "@/components/UploadFile/index.ts"
  import { formRules, runList, operateList, typeList } from './jsonAndRules'
  import { formatDateToYMD } from '@/utils/index'
  import { isPhoneNumber } from '@/utils/index'
  import { defaultProps } from '@/utils/tree'
  import { Plus } from '@element-plus/icons-vue'
  const goBack = inject('goBack')
  const deptTree = inject('deptTree')
  const carTypeList = inject('carTypeList')
  const message = useMessage() // 消息弹窗
  const loading = ref(false)
  const pageStatus = ref(1) // 1新增  2编辑
  const copyData = ref([])
  const formRef = ref(null)
  const formData = reactive({
    data: {
      id: 1,
      carNo: '', // 车牌号
      labelTypeName: '', // 厂牌型号
      carBrand: '', // 车辆品牌
      maxOccupants: '', // 核定乘员人数
      isNewEnergy: '', // 是否是新能源
      cardType: '', // 车型
      runId: '', // 运行状态
      operateId: '', // 运营状态
      departmentId: '', // 所属部门
      carPhotos: [], // 车辆图片
      operatelogos: [], // 操作记录
    }
  })
  const init = (type, id) => {
    pageStatus.value = type
  }

  /** 操作记录逻辑处理 - 开始 */
  const addRow = () => {
    let operatelogos = JSON.parse(JSON.stringify(formData.data.operatelogos))
    copyData.value = JSON.parse(JSON.stringify(operatelogos))
    let flag = operatelogos.find(item => item.editable)
    if (flag) {
      ElMessage.warning('请先保存当前数据')
      return
    }
    operatelogos.push({
      typeId: null, 
      operateTime: null, 
      operateName: null, 
      phone: null,
      editable: true,
    })
    formData.data.operatelogos = operatelogos
  }
  const edit = (index) => {
    let operatelogos = JSON.parse(JSON.stringify(formData.data.operatelogos))
    let flag = operatelogos.find(item => item.editable)
    if (flag) {
      ElMessage.warning('请先保存当前数据')
      return
    }
    copyData.value = JSON.parse(JSON.stringify(operatelogos))
    operatelogos[index].editable = true
    formData.data.operatelogos = operatelogos
  }
  const del = (index) => {
    let operatelogos = JSON.parse(JSON.stringify(formData.data.operatelogos))
    operatelogos.splice(index, 1)
    formData.data.operatelogos = operatelogos
  }
  const cancle = () => {
    let operatelogos = JSON.parse(JSON.stringify(copyData.value))
    formData.data.operatelogos = operatelogos
  }
  const save = (row, index) => {
    let operatelogos = JSON.parse(JSON.stringify(formData.data.operatelogos))
    const {typeId, operateTime, operateName, phone} = row
    if (!typeId) {
      message.warning('请选择操作类型')
      return
    }
    if (!operateTime) {
      message.warning('请选择操作时间')
      return
    }
    if (!operateName) {
      message.warning('请输入操作人姓名')
      return
    }
    if (!phone) {
      message.warning('请输入联系电话')
      return
    }
    if (!isPhoneNumber(phone)) {
      message.warning('请输入正确的联系电话')
      return
    }
    operatelogos.forEach(item => item.editable = false)
    formData.data.operatelogos = operatelogos
  }
  /** 操作记录逻辑处理 - 结束 */

  const closeForm = () => {
    // 关闭表单弹窗逻辑
    goBack()
  }
  const submitForm = (type) => {
    const formEl = formRef.value
    if (!formEl) return
    formEl.validate((valid, fields) => {
      if (valid) {

        console.log(formData.data, valid, '走这里来了？？？');
      }else{
        for(let key in fields){
          message.error(fields[key].message)
        }
      }
    })
  }
  defineExpose({ init })
</script>
<style lang="scss" scoped>
.el-form-item{
  width: 100%;
}
.addRow{
  margin-top: 12px;
  width: 100%;
}
</style>
